<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div id="qw">0 -->
        <!-- <h1>123123312123</h1> -->
        <!-- <iframe src="https://www.cnblogs.com/interdrp/p/9284620.html" frameborder="0" width="100%" height="1000"></iframe> -->
    <!-- </div> -->
    <div id="parentElement">
        <span id="childElement">foo bar</span>
      </div>
</body>

<script>
// let tp = document.createElement('img');
// tp.src = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3850243155,2703833283&fm=26&gp=0.jpg'
// tp.style = 'width：100px;height:300px'

// let d = document.querySelector('h1');

// console.log(d)
// document.body.insertBefore(tp,d)
// document.body.insertBefore(tp,d)
// document.getElementById('qw').insertBefore(tp,d)
// console.log(document.body.insertBefore(tp,d))

//创建一个新的、普通的<span>元素
    var sp1 = document.createElement("span");

//插入节点之前，要获得节点的引用
var sp2 = document.getElementById("childElement");
//获得父节点的引用
var parentDiv = sp2.parentNode;

//在DOM中在sp2之前插入一个新元素
parentDiv.insertBefore(sp1, sp2);

</script>
</html>